<template>
	<view class="main-contain">
		<!-- 顶部导航 -->
		<view class="vote-header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="36px" color="#FFFFFF"></u-icon>
			</view>
			<view class="header-title">投票活动</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 投票活动标题 -->
		<view class="title-contain">
			<view class="title-info">{{title}}</view>
		</view>
		<!-- 投票记录 -->
		<view class="count-contain">
			<view class="count-Item">
				<view class="count-info">参与人数</view>
				<view class="count-info">{{topStu.participants}}</view>
			</view>
			<view class="count-Item">
				<view class="count-info">投票榜单</view>
				<view class="count-info">No.1 {{topStu.topInfo}}</view>
			</view>
			<view class="count-Item">
				<view class="count-info"> 投票总数</view>
				<view class="count-info">{{topStu.voteTotal}}</view>
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="search-contain">
			<u-search v-model="value" bgColor="#FFFFFF" :show-action="false" @change="change" borderColor="#000000"
				placeholderColor="#000000"></u-search>
		</view>
		<!-- 投票作品列表 -->
		<view class="art-contain">

			<view class="art-item" v-for="(item,index) in filterList" :key="index">
				<view class="art-Img">
					<u-image :src="item.artworkLink" width="100%" height="170rpx" radius="18px"
						@click="previewImage(item.artworkLink)"></u-image>
				</view>
				<view class="art-info">名字:{{item.artworkTitle||''}}</view>
				<view class="art-info">作者:{{item.stuName||0}}</view>
				<view class="art-info">班级:{{item.claDescribe||0}}</view>
				<view class="art-info">获票数:{{item.voteCount||0}}</view>
				<view class="vote-button">
					<u-button type="primary" size="medium" @click="handleVote(item)">投票</u-button>
				</view>
			</view>
			<view class="bottom-contain">
				<u-loadmore :line="true" status="nomore" :nomoreText="nomoreText"></u-loadmore>
			</view>
		</view>
		<u-modal :content="content" :show="modalShow" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close"></u-modal>
		
	</view>
</template>

<script>
	
	import {
		getAllVoteList,
		getUserVote,
		getVoteJudge
	} from '@/api/vote.js'
	export default {
		data() {
			return {
				
				user: {
					campusId: 1, //当前账号的校区ID
					parentId: 1003,
					teacherId: 0,
					exhId: 0,
				},
				stickyList: [{
						name: '校区作品'
					},
					{
						name: '投票'
					},
					{
						name: '艺术家相册'
					},
					{
						name: '社区'
					},
				],
				nomoreText: "没有更多了",
				baseUrl: 'http://localhost:5217',
				title: "全国小学生卡通画线上投票大赛",
				topStu: {},
				value: '',
				voteList: [],
				filterList: [],
				modalShow: false,
				content: "", //模态框内容
				currVoteUser: {},
			}
		},
		created() {
			this.user.exhId=wx.getStorageSync("exhId");
			
			this.InitVoteList();
			//初始化防抖
			this.debouncedSearch = this.debounce(this.searchFilter, 600);
		},
		
		onShow() {
			this.InitVoteList();
			
		},
		

		methods: {
			

			handleVote(val) {
				console.log(val);
				this.currVoteUser = val;
				const data = {
					exhId: this.user.exhId,
					workId: val.artworksId,
					campusId: this.user.campusId,
					teacherId: this.user.teacherId || 0,
					parentId: this.user.parentId || 0,
				}
				//判断用户是否投票过该作品
				getVoteJudge(data).then(res => {
					console.log(res);
					if (res.data.judege) {
						//已投票
						uni.showToast({
							title: '您已为该作品投过票',
							icon: 'none',
							duration: 2000,
							position: 'bottom'
						});
					} else {
						//未投票
						this.content = "确认投给作品《" + val.artworkTitle + "》";
						this.modalShow = true;
					}
				}).catch(err => {
					console.log("查询作品投票情况出错");
				})





			},
			//投票列表的初始化
			InitVoteList() {
				const data = {
					exhId: this.user.exhId
				};

				getAllVoteList(data).then(res => {
						console.log(res);
						this.voteList = res.data.map.voteList;
						this.filterList = [...this.voteList];
						console.log(this.filterList);
						this.topStu.participants = res.data.map.participants;
						this.topStu.topInfo = res.data.map.topInfo;
						this.topStu.voteTotal = res.data.map.voteTotal;
						this.user.exhId = res.data.map.exhId;
						console.log(this.topStu);
					})
					.catch(err => {
						console.error('获取作品失败:', err)
					})
			},
			//图片预览
			previewImage(imgUrl) {
				const allImages = this.filterList.map(item => item.artworkLink);
				uni.previewImage({
					current: imgUrl,
					urls: allImages
				});
			},
			change(e) {

				this.value = e;
				this.debouncedSearch();
			},
			searchFilter() {
				console.log(this.value);
				const keyword = this.value.trim();
				if (!keyword) {
					this.filterList = [...this.voteList];
					this.nomoreText = "没有更多了";
					return;
				}
				this.filterList = this.voteList.filter(item => {
					const titleMatch = item.artworkTitle.includes(keyword);
					const authorMatch = item.stuName.includes(keyword);
					const classMatch = item.claDescribe.includes(keyword);
					return titleMatch || authorMatch || classMatch;
				});
				if (this.filterList.length < 1) {
					this.nomoreText = "暂无数据";
				}
			},
			// 防抖函数
			debounce(func, delay) {
				let timer = null;
				return function(...args) {
					if (timer) clearTimeout(timer);
					timer = setTimeout(() => {
						func.apply(this, args);
					}, delay);
				}
			},
			confirm() {
				this.modalShow = false
				console.log('confirm');
				const data = {
					exhId: this.user.exhId,
					workId: this.currVoteUser.artworksId,
					campusId: this.user.campusId,
					teacherId: this.user.teacherId || 0,
					parentId: this.user.parentId || 0,
				}
				getUserVote(data).then(res => {
					console.log(res);
					this.InitVoteList();
					// 提示用户投票成功
					uni.showToast({
						title: '投票成功',
						icon: 'success',
						duration: 2000,
						position: 'bottom'
					});
				}).catch(err => {
					console.log("投票出错");
				})

			},
			cancel() {
				this.modalShow = false
				console.log('cancel');
			},
			close() {
				this.modalShow = false
				console.log('close');
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main-contain {
		box-sizing: border-box;
		padding-bottom: 120px;
		.vote-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 120rpx;
			background-color: #2C57F6;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: bold;
		
			.header-left,
			.header-right {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.title-contain {
			height: 14vh;
			box-sizing: border-box;
			padding: 20rpx 35rpx 0 35rpx;

			.title-info {
				height: 80%;
				font-size: 45rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 300%;
				background-color: #FBDB5D;
				font-family: "STXingkai", "华文行楷", cursive;
				font-style: italic;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
				border-radius: 15rpx;
			}
		}

		.count-contain {

			min-height: 8vh;
			max-height: 12vh;
			overflow: hidden;
			padding: 0 35rpx;
			box-sizing: border-box;

			.count-Item {
				width: 28%;
				height: 90%;
				float: left;
				margin: 0 8px;
				border-radius: 10rpx;
				border: 1px solid gray;
				background-color: #FFFFFF;
				padding-top: 5rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
				box-sizing: border-box;

				.count-info {
					text-align: center;
					font-style: italic;
					color: black;
					font-size: 30rpx;
					box-sizing: border-box;
					padding: 5rpx;
				}
			}
		}

		.search-contain {
			padding: 30rpx 100rpx;
		}

		.art-contain {

			.art-item {
				width: 47vw;
				display: inline-block;
				margin: 1.4%;
				margin-bottom: 0;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1px solid black;
				box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.18);
				background-color: #fff;

				.art-Img {
					height: 50%;
					margin: 5rpx;
					border-radius: 30rpx;
					overflow: hidden;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
				}

				.art-info {
					height: 40rpx;
					overflow: hidden;
					line-height: 40rpx;
					padding-left: 10%;
					margin-bottom: 15rpx;

					white-space: nowrap;
					text-overflow: ellipsis;
					width: 90%;
				}

				.vote-button {
					width: 60%;
					height: 80rpx;
					overflow: hidden;
					line-height: 100%;
					margin: 0 auto;
					margin-bottom: 10rpx;
					padding-bottom: 10rpx;
				}

				u-button {

					&::v-deep {
						font-weight: bold;
						box-shadow: 0 4rpx 0 rgba(44, 87, 246, 0.5);
					}
				}
			}

			.bottom-contain {}
		}
	}
</style>